import React, { memo, useEffect, useCallback, useState } from 'react'
import { Link } from "react-router-dom";

import style from "./style.css";
import { getTime } from "@/utils/date";

const ZjDetail = memo((props) => {
  const { album, songs, addSong, playSong, noOpenup } = props;
  const [onMouseIndex, setOnMouseIndex] = useState(1);
  const [isShowAll, setIsShowAll] = useState(false);
  const [description, setDescription] = useState("");

  const onMouserEvent = useCallback(
    (val, index) => {
      if (val == "over") {
        setOnMouseIndex(index);
      } else if (val == "leave") {
        setOnMouseIndex(1);
      }
    },
    [onMouseIndex]
  );

  if (!album) {
    console.log("渲染一", album);
    return <div>Loading...</div>;
  }
  return (
    <div className={style.zjDetail}>
      <div className={style.zjTop}>
        <div className={style.zjTopleft}>
          <div className={style.msk}></div>
          <img src={album.blurPicUrl} alt="专辑图片" />
        </div>
        <div className={style.zjTopright}>
          <div className={style.gctitle}>
            <img src={require("./svgs/biaoqian.svg").default} alt="专辑标签" />
            <div className={style.gcname}>
              <div>{album.name}</div>
              {album.transNames && album.transNames.length > 0
                ? album.transNames.map((transName, i) => {
                    <div key={transName} key={i}>
                      {i > 0 ? `, ${transName}` : transName}{" "}
                    </div>;
                  })
                : ""}
            </div>
          </div>
          <div className={style.gcauthor}>
            <div>
              歌手：<Link to="#">{album.artist.name}</Link>
            </div>
            <div>
              发行时间：<Link to="#">{getTime(album.publishTime)}</Link>
            </div>
            <div>
              发行公司：<Link to="#">{album.company}</Link>
            </div>
          </div>
          <div className={style.gcbtns}>
            <button
              className={style.bofang}
              onClick={() => playSong(1, 1, songs)}
            >
              <img src={require("./svgs/play.svg").default} alt="播放" />
              播放
            </button>
            <button className={style.bofang} onClick={() => addSong(1, 1, songs)}>添加歌单</button>
            <button className={style.bofang}>
              <img src={require("./svgs/star.svg").default} alt="收藏" />
              收藏
            </button>
            <button className={style.bofang}>
              <img src={require("./svgs/share.svg").default} alt="分享" />
              分享
            </button>
            <button className={style.bofang}>
              <img src={require("./svgs/down.svg").default} alt="下载" />
              下载
            </button>
            <button className={style.bofang}>
              <img src={require("./svgs/coment.svg").default} alt="评论" />(
              {album.info.commentCount})
            </button>
          </div>
        </div>
      </div>
      <div className={style.zjintro}>
        <div className={style.introTitle}>专辑介绍</div>
        <div className={style.contentWrapper}>
          <div
            className={style.gclrc}
            style={{ height: isShowAll ? "auto" : "90px", overflow: "hidden" }}
          >
            <pre value={album.description} readOnly={true} rows={100}>
              {album.description}
            </pre>
          </div>

          {album.description ? (
            <div
              className={style.showall}
              onClick={() => setIsShowAll(!isShowAll)}
            >
              <Link to="#">{isShowAll ? "收起" : "展开"}</Link>
              <img src={require("./svgs/xiangxia.png").default} alt="下箭头" />
            </div>
          ) : null}
        </div>
      </div>
      <div className={style.zjBottom}>
        <div className={style.zjBottomTitle}>
          <div>包含歌曲列表</div>
          <div>{songs.length}首歌</div>
          <div className={style.leftshare}>
            <img src={require("./svgs/music.png").default} alt="分享按钮" />
            <Link to="#">生成外联播放器</Link>
          </div>
        </div>
        <table className={style.zjBottomList}>
          <thead>
            <tr style={{ backgroundColor: "#f5f5f5" }}>
              <th style={{ width: "80px" }}></th>
              <th>歌曲标题</th>
              <th style={{ width: "100px" }}>时长</th>
              <th style={{ width: "120px" }}>歌手</th>
            </tr>
          </thead>
          <tbody>
            {songs.map((item, index) => {
              return (
                <tr key={index}>
                  <td className={style.tdone} id={style.tdone}>
                    <span>{index + 1}</span>{" "}
                    <img
                      src={require("./svgs/playtwo.svg").default}
                      alt="播放"
                      onClick={() => playSong(item.id)}
                    />
                  </td>
                  <td className={style.tdtwo}>
                    <span>{item.name}</span>
                    {item.tns ? <span> - {item.tns[0]}</span> : ""}
                  </td>
                  <td
                    className={style.tdthree}
                    id={style.tdthree}
                    onMouseOver={() => onMouserEvent("over", index + 1)}
                    onMouseLeave={() => onMouserEvent("leave", index + 1)}
                  >
                    <div
                      style={{
                        display: index + 1 == onMouseIndex ? "block" : "none",
                      }}
                    >
                      <img
                        src={require("./svgs/playtwo.svg").default}
                        alt="播放"
                        onClick={() => playSong(item.id)}
                      />
                      <img
                        src={require("./svgs/star.svg").default}
                        alt="收藏"
                      />
                      <img
                        src={require("./svgs/share.svg").default}
                        alt="分享"
                      />
                      <img
                        src={require("./svgs/down.svg").default}
                        alt="下载"
                      />
                    </div>
                    <span
                      style={{
                        display: index + 1 == onMouseIndex ? "none" : "block",
                      }}
                    >
                      {getTime(item.dt, 2)}
                    </span>
                  </td>
                  <td className={style.tdfour}>
                    {item.ar.length ? item.ar[0].name : ""}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
});

export default ZjDetail